<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

<script type="text/javascript">
jQuery('#list').jqGrid({
	url:'/menus/list/format/json',
	datatype: 'json',
	mtype: 'GET',
	colNames:['Id', 'Title', 'Alias', 'Parent', 'Resource'],
	colModel :[
	  {name:'MENUS_ID', index:'MENUS_ID', sorttype:'int', width:50},
	  {name:'MENUS_TITLE', index:'MENUS_TITLE', editable:true, editrules:{required:true}},
	  {name:'MENUS_ALIAS', index:'MENUS_ALIAS', editable:true, editrules:{required:true}},
	  {name:'MENUS_PARENTID', index:'MENUS_PARENTID', editable:true, edittype:'select', editoptions:{value:{<?php foreach ($this->menus as $id => $title) echo "{$id}:'{$title}',"; ?>}}},
	  {name:'MENUS_RESOURCEID', index:'MENUS_RESOURCEID', sortable:false, editable:true, editrules:{required:true}, edittype:'select', editoptions:{value:{<?php foreach ($this->resources as $id => $title) echo "{$id}:'{$title}',"; ?>}}} ],
	pager: jQuery('#pager'),
	rowNum:20,
	rowList:[20, 40, 60, 80, 100, 150, 200],
	sortname: 'MENUS_ID',
	sortorder: 'asc',
	viewrecords: true,
	caption: 'Menus View',
	editurl: "/menus/edit",
	height: 'auto',
	width: 'auto'
}).navGrid('#pager',{
	edit:true, add:true, del:true, search:true
});
</script>
